import { CSSProperties, ReactNode } from 'react';
import DetailSkeleton from './DetailSkeleton';
import DataSkeleton from './DataSkeleton';
import { View } from '@tarojs/components';
import ListSkeleton from './ListSkeleton';

type Props = {
  className?: string;
  loading?: boolean;
  type?: 'data' | 'detail' | 'list';
  children?: ReactNode;
  style?: CSSProperties;
};

export default ({
  className,
  type = 'detail',
  children,
  loading,
  style,
}: Props) => {
  return (
    <View className={className} style={style}>
      {type === 'detail' && loading && <DetailSkeleton />}
      {type === 'data' && loading && <DataSkeleton />}
      {type === 'list' && loading && <ListSkeleton />}
      {loading || children}
    </View>
  );
};
